<template>
    <a-layout-header
            :style="{ position: 'fixed', zIndex: 100, width: '100%', boxShadow: 'box-shadow: 0px 10px 10px #eee' }"
            id="headerBar">
        <img class="logo" src="../assets/logo.png"/>
        <a-popover placement="bottom">
            <template slot="content">
                <a-list :data-source="searchHistory"
                        :locale="{emptyText: '暂无搜索历史'}"
                        :rowKey="item => {searchHistory.indexOf(item)}"
                        item-layout="horizontal"
                        size="small">
                    <a-list-item @click="clickSearchHistory($event, item)"
                                 class="history-link"
                                 slot="renderItem"
                                 slot-scope="item">
                        <span href="#">{{ item }}</span>
                        <a-button size="small" style="color: #4b4b4b;" type="link">
                            <a-icon type="close"/>
                        </a-button>
                    </a-list-item>
                </a-list>
            </template>
            <a-input-search @search="searchArticle" placeholder="搜索" style="width: 200px;" v-model="searchValue"/>
        </a-popover>
        <div id="right-panel">
            <div class="right-content" v-if="authorized">
                    <span style="font-size: 16px">
                        <a-dropdown placement="bottomCenter">
                            <a @click="e => e.preventDefault()" class="ant-dropdown-link" style="color: #333;">
                                <a-badge :count="notificationsCount" dot> <!-- 传参count="0"不显示红点 -->
                                    <a-icon type="alert"/>
                                </a-badge>
                                消息
                            </a>
                            <a-menu slot="overlay" style="min-width:5rem">
                                <a-menu-item>
                                    <a href="javascript:">点赞<a-badge
                                            :count="($store.state.notifications.like || []).length"/></a>
                                </a-menu-item>
                                <a-menu-item>
                                    <a href="javascript:">评论<a-badge count="0"/></a>
                                </a-menu-item>
                                <a-menu-item>
                                    <a href="javascript:">新粉丝<a-badge count="0"/></a>
                                </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                    </span>
            </div>
            <div class="right-content">
                <a-button @click="toEditor" style="border-radius: 25px" type="primary">
                    <a-icon type="edit"/>
                    写文章
                </a-button>
            </div>
            <div class="right-content" style="width: 100px; text-align: center;">
                    <span style="font-size:32px" v-if="authorized">
                        <a-dropdown placement="bottomRight">
                            <a @click="e => e.preventDefault()" class="ant-dropdown-link">
                                <a-icon :component="PandaSvg"/>
                            </a>
                            <a-menu slot="overlay">
                                <a-menu-item>
                                    <a href="javascript:">个人信息</a>
                                </a-menu-item>
                                <a-menu-item>
                                    <a href="javascript:">粉丝</a>
                                </a-menu-item>
                                <a-menu-item>
                                    <a href="javascript:">关注</a>
                                </a-menu-item>
                                <a-menu-item>
                                    <a @click="logout" href="javascript:">退出</a>
                                </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                    </span>
                <a-button style="font-size: 16px" type="link" v-else v-on:click="$refs.loginModal.showModal = true;">
                    注册&nbsp;|&nbsp;登录
                </a-button>
            </div>
        </div>
        <LoginCard @loginSuccess="login" ref="loginModal"></LoginCard>
    </a-layout-header>
</template>

<script>
    // 按需加载
    import {Badge, Button, Dropdown, Icon, Input, Layout, List, Menu, Popover} from "ant-design-vue";
    import LoginCard from "../components/LoginCard";
    import axios from "axios";

    export default {
        name: 'HeaderBar',
        components: {
            ALayoutHeader: Layout.Header,
            AInputSearch: Input.Search,
            AIcon: Icon,
            AButton: Button,
            ADropdown: Dropdown,
            AMenu: Menu,
            AMenuItem: Menu.Item,
            ABadge: Badge,
            APopover: Popover,
            AList: List,
            AListItem: List.Item,

            LoginCard
        },
        data() {
            return {
                authorized: false,
                PandaSvg: {
                    template: `
    <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
      <path d="M99.096 315.634s-82.58-64.032-82.58-132.13c0-66.064 33.032-165.162 148.646-148.646 83.37 11.91 99.096 165.162 99.096 165.162l-165.162 115.614zM924.906 315.634s82.58-64.032 82.58-132.13c0-66.064-33.032-165.162-148.646-148.646-83.37 11.91-99.096 165.162-99.096 165.162l165.162 115.614z" fill="#6B676E" p-id="1143" />
      <path d="M1024 561.548c0 264.526-229.23 429.42-512.002 429.42S0 826.076 0 561.548 283.96 66.064 512.002 66.064 1024 297.022 1024 561.548z" fill="#FFEBD2" p-id="1144" />
      <path d="M330.324 842.126c0 82.096 81.34 148.646 181.678 148.646s181.678-66.55 181.678-148.646H330.324z" fill="#E9D7C3" p-id="1145" />
      <path d="M644.13 611.098C594.582 528.516 561.55 512 512.002 512c-49.548 0-82.58 16.516-132.13 99.096-42.488 70.814-78.73 211.264-49.548 247.742 66.064 82.58 165.162 33.032 181.678 33.032 16.516 0 115.614 49.548 181.678-33.032 29.18-36.476-7.064-176.93-49.55-247.74z" fill="#FFFFFF" p-id="1146" />
      <path d="M611.098 495.484c0-45.608 36.974-82.58 82.58-82.58 49.548 0 198.194 99.098 198.194 165.162s-79.934 144.904-148.646 99.096c-49.548-33.032-132.128-148.646-132.128-181.678zM412.904 495.484c0-45.608-36.974-82.58-82.58-82.58-49.548 0-198.194 99.098-198.194 165.162s79.934 144.904 148.646 99.096c49.548-33.032 132.128-148.646 132.128-181.678z" fill="#6B676E" p-id="1147" />
      <path d="M512.002 726.622c-30.06 0-115.614 5.668-115.614 33.032 0 49.638 105.484 85.24 115.614 82.58 10.128 2.66 115.614-32.944 115.614-82.58-0.002-27.366-85.556-33.032-115.614-33.032z" fill="#464655" p-id="1148" />
      <path d="M330.324 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z" fill="#464655" p-id="1149" />
      <path d="M693.678 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z" fill="#464655" p-id="1150" />
    </svg>
  `,
                },
                searchHistory: [],
                searchValue: ''
            }
        },
        computed: {
            notificationsCount: function () {
                let notifications = this.$store.state.notifications;
                // TODO: 还有关注数量和评论数量
                return (notifications.like || []).length;
            }
        },
        methods: {
            login: function () {
                this.authorized = true;
            },
            logout: function () {
                this.authorized = false;
                localStorage.removeItem("token");
            },
            toEditor: function () {
                this.authorized ? window.open("/editor", '_blank').location : this.$refs.loginModal.showModal = true;
            },
            searchArticle: function (value) {
                if (!value) return;
                // 保存搜索历史，并判断是否已经在历史内
                if (!this.searchHistory.includes(value)) {
                    if (this.searchHistory.length >= 3) this.searchHistory.pop();
                    this.searchHistory.unshift(value);
                    localStorage.setItem("search-history", JSON.stringify(this.searchHistory));
                }
                // 判断是否是一样的搜索词
                if (value !== this.$route.query.q)
                    this.$router.push({path: '/search', query: {q: value}});
            },
            clickSearchHistory: function (event, item) {
                let clickTag = event.target.tagName;
                // 点击列表元素就是搜索，否则就是删除
                if (clickTag !== "BUTTON") {
                    this.searchValue = item;
                    this.searchArticle(item);
                } else {
                    this.searchHistory.splice(this.searchHistory.indexOf(item), 1);
                    localStorage.setItem("search-history", JSON.stringify(this.searchHistory));
                }
            }
        },
        watch: {
            authorized: function () {
                if (!this.authorized) return;
                axios.get("/notification/all/").then(response => {
                    this.$store.state.notifications = response.data;
                })
            }
        },
        mounted() {
            let vue = this;
            axios.defaults.headers['token'] = localStorage.getItem('token') || '';
            axios.get("/user/").then(function (response) {
                vue.authorized = true;
                vue.$store.state.userData = response.data;
            })
            vue.searchHistory = JSON.parse(localStorage.getItem("search-history") || '[]');
        }
    }
</script>

<style>
    #headerBar {
        background: #fff;
    }

    #headerBar .logo {
        width: 120px;
        height: 31px;
        margin: 16px 24px 16px 0;
        float: left;
    }

    #headerBar .ant-input {
        border-radius: 25px;
        -moz-border-radius: 25px; /* 老的 Firefox */
    }

    #headerBar #right-panel {
        float: right;
    }

    #headerBar #right-panel > .right-content {
        margin-right: 20px;
        float: left;
    }

    .ant-dropdown-menu-item .ant-badge.ant-badge-not-a-wrapper {
        margin-left: 10px;
        position: absolute;
        right: 5px;
    }

    .ant-popover {
        width: 200px;
    }

    .history-link:hover {
        background-color: #f3f3f3;
        cursor: pointer;
    }

    .history-link span {
        margin: 0 10px;
        overflow: hidden;
        white-space: nowrap;
        color: #4b4b4b;
    }

    .ant-popover-inner-content {
        padding: 0 !important;
    }
</style>
